<template>
	<view class="main">
		<view class="result"><image class="resultimg" src="/static/2images/success.png"></image>购票成功</view>
		<view class="qr_bg">
			<zb-code :size="400" :ref="'qrCodeYcq'" cid="qr-code-ycq" :val="s_no"></zb-code>
		</view>
		<view class="tip">请凭二维码入场，期待您的光临！</view>
		<view class="btns"><view class="btn mr10" @click="gotoBuyTicket">返回主页</view><view class="btn" @click="queryOrder">查询订单</view></view>
	</view>
</template>

<script>
	import zbCode from '@/components/zb-code/zb-code.vue';
	export default {
		components: {
			zbCode
		},
		data() {
			return {
				s_no:''
			}
		},
		onLoad(options) {
			this.s_no = options.s_no;
			this.$nextTick(() => {
				this.$refs['qrCodeYcq']._makeCode()
				
			})
		},
		methods: {
			gotoBuyTicket(){
				uni.switchTab({
					url: '/pages/index/2_index'
				})
			},
			queryOrder(){
				uni.navigateTo({
					url: `/pages/2_development/user/water_order/list`
				});
			}
		}
	}
</script>

<style>
	.main{
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
	}
	.result{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 50rpx;
	}
	.qr_bg{
		margin-top: 50rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.tip{
		font-size: 28rpx;
		color: #000000;
		margin-top: 80rpx;
		margin: 80rpx 40rpx 0rpx 40rpx;
		text-align: center;
	}
	
	.btns{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 80rpx;
		margin-bottom: 60rpx;
	}
	.btn{
		width:35%;
		height:80rpx;
		background-color: #01A1ED;
		border-radius: 40rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
	}
	
	.resultimg{
		width:80rpx;
		height:80rpx;
		margin-right: 10rpx;
	}
	.mr10{
		margin-right: 20rpx;
	}
	
</style>
